import React from 'react';
import { Badge } from 'antd-mobile';
import styles from './IconItem.less';

const textMap = {
  reservation: '服务预约',
  barcode: '会员码',
  exchange: '兑换验证',
  consultant: '专属顾问',
  acc: '积分兑换',
  coupon: '优惠券',
  savelist: '储值余额',
  deposit: '寄存',
  stored: '附近门店',
  info: '会员资料',
  rights: '会员权益',
  consume: '消费记录',
  wheel: "幸运抽奖",
  ai: 'AI测肤',
  invite: '邀请注册'
};

class IconItem extends React.Component {

  render() {
    const { type, text, content = ' ', size, dot } = this.props;
    const realText = text || textMap[type];
    if (dot) {
      return (
        <div
          className={styles.container}
          onClick={(event) => {
            event.preventDefault();
            this.props.onClick && this.props.onClick();
          }}
        >
          <Badge dot>
          <div className={styles.head}>
            <a className={`${styles[type]} ${styles[size]}`} />
          </div>
          <div className={styles.body}>
            {realText}
          </div>
          <div className={styles.tail}>
            <div className={styles[type + 'Tail']}>
              {content}
            </div>
          </div>
          </Badge>
        </div>
      );
    }
    return (
      <div
        className={styles.container}
        onClick={(event) => {
          event.preventDefault();
          this.props.onClick && this.props.onClick();
        }}
      >
        <div className={styles.head}>
          <a className={`${styles[type]} ${styles[size]}`} />
        </div>
        <div className={styles.body}>
          {realText}
        </div>
        <div className={styles.tail}>
          <div className={styles[type + 'Tail']}>
            {content}
          </div>
        </div>
      </div>
    );
  }
}

IconItem.propTypes = {
  dot: React.PropTypes.bool,
  size: React.PropTypes.string,
  type: React.PropTypes.string,
  text: React.PropTypes.string,
  content: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
  ]),
  onClick: React.PropTypes.func,
};

IconItem.defaultProps = {
  size: 'large',
};

export default IconItem;
